<template>
    <div class="footer">
        <div class="w">
           <div class="footer-left">
           <p class="foo-p">关于我们</p>
           <div>
               <span>
                   <router-link to="/" class="router-link">网站首页</router-link>
               </span>
               <span>
                   <router-link to="/clinicDistribution" class="router-link">诊所分布</router-link>
               </span>
           </div>
           <div>
               <span>
                    <router-link to="/aboutUs" class="router-link">关于长木</router-link>
               </span>
               <span>
                    <router-link to="/healthInformation" class="router-link">健康资讯</router-link>
               </span>
           </div>
           <div>
               <span>
                    <router-link to="/membershipService" class="router-link">医疗服务</router-link>
               </span>
               <span>
                    <router-link to="/medicalService" class="router-link">会员服务</router-link>
               </span>
           </div>
           <div>
               <span>
                    <router-link to="/departmentIntroduction" class="router-link">科室介绍</router-link>
               </span>
           </div>
        </div>
        <div class="footer-middle">
           <p class="foo-p">关注我们</p>
           <div>
               <img src="../../assets/images/footer_code_03.png">
               <div class="code-text">
                   <p>扫一扫</p>
                   <p>关注公众号</p>
               </div>
           </div>
        </div>
        <div class="footer-right">
           <p class="foo-p">联系我们</p>
           <p><img src="../../assets/images/footer_03.png">电话:400-888-8888</p>
           <p><img src="../../assets/images/footer_07.png">手机:15888885225</p>
           <p><img src="../../assets/images/footer_09.png">邮箱:123@163.com</p>
           <p><img src="../../assets/images/footer_11.png">总部地址:深圳市xx区xx路xx广场x号楼xx号</p>
        </div>
        
     </div>
     <p class="copy">©Copyright © 2018-2019,www.xxxxxx.comAll rights reserved 版权所有</p>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
*{
    font-size:16px;
}
p{
    color:#fff;
}
.footer{
     height:100%;
     background-color: #363d47;
     /* background-size: 100%; */
 }
.w{
    background:url('../../assets/images/footer_bg_02.png') no-repeat;
    width:1200px;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
}
.w .router-link:hover{
    text-decoration: none;
    color:#3aa5c5;
}
.footer-left{
    border-right:1px solid #ccc;
    width:378px;
    height:256px;
}
.footer-left div{
    margin:20px  0;
}
.footer-left div span:nth-of-type(2){
    display:inline-block;
    margin-left:60px;
}
.footer-middle{
    border-right:1px solid #ccc;
    width:300px;
    height:256px;
    position:relative;
}
.footer-middle img{
    margin-top:20px;
}
.footer-middle .code-text{
    display:inline-block;
    text-align: center;
    position:absolute;
    left:154px;
    top:84px;
}
.footer-right p{
    margin:15px 0 18px 0;
}
.footer-right p img{
    position:relative;
    top:-2px;
    left:-8px;
}
.footer-left p:nth-of-type(1),
.footer-middle p:nth-of-type(1),
.footer-right p:nth-of-type(1){
    font-size:24px;
}
.copy{
    height:50px;
    text-align: center;
    color:#858b94;
    background:#363d47;
    padding:10px;
}
.foo-p{
    margin:10px 0;
}
</style>
